import React from "react";
import InputBase from "./InputBase/index";
import SelectBase from "./SelectBase";
import InputNumber from "./InputNumber";
import CheckboxBase from "./CheckboxBase";
import RadioBase from "./RadioBase";

export default function FormTest() {
  // const [form, setValue] = useState({});

  const formData = {
    name: "张三",
    age: 25,
    sex: 1,
    hobbies: 1,
    hobbies2: [1],
    hobbies3: [1],
  };
  return (
    <div>
      <div>
        输入框
        <InputBase
          defaultValue={formData.name}
          placeholder={"请输入姓名"}
          onChange={(value) => (formData.name = value)}
        ></InputBase>
      </div>
      <div>
        单选框
        <RadioBase
          options={[
            { label: "男", value: 1 },
            { label: "女", value: 2 },
          ]}
          defaultValue={formData.sex}
          onChange={(value) => (formData.sex = value)}
        ></RadioBase>
      </div>
      <div>
        数字输入框
        <InputNumber
          defaultValue={formData.age}
          placeholder={"请输入年龄"}
          onChange={(value) => (formData.age = value)}
        ></InputNumber>
      </div>

      <div>
        下拉单选择框
        <SelectBase
          defaultValue={formData.hobbies}
          placeholder={"请选择爱好"}
          options={[
            { label: "篮球", value: 1 },
            { label: "足球", value: 2 },
            { label: "乒乓球", value: 3 },
          ]}
          onChange={(value) => (formData.hobbies = value)}
        ></SelectBase>
      </div>
      <div>
        下拉多选择框
        <SelectBase
          defaultValue={formData.hobbies2}
          placeholder={"请选择爱好"}
          options={[
            { label: "篮球", value: 1 },
            { label: "足球", value: 2 },
            { label: "乒乓球", value: 3 },
          ]}
          onChange={(value) => (formData.hobbies2 = value)}
        ></SelectBase>
      </div>
      <div>
        复选框
        <CheckboxBase
          defaultValue={formData.hobbies3}
          options={[
            { label: "篮球", value: 1 },
            { label: "足球", value: 2 },
            { label: "乒乓球", value: 3 },
          ]}
          onChange={(value) => (formData.hobbies3 = value)}
        ></CheckboxBase>
      </div>
      <div>
        {/* <FormTest></FormTest> */}
        <button onClick={() => alert(JSON.stringify(formData))}>提交</button>
      </div>
    </div>
  );
}
